<template>
	<div>
		<van-pull-refresh v-model="product.refreshing" @refresh="onRefresh" :disabled="disabled">
		  <div>
			<van-sticky :offset-top="1">
			 <header id="header"  class="aui-bar aui-bar-nav">
				 <a class="aui-pull-left" @click="back">
					 <span class="iconfont icon-fanhui"></span>
				 </a>
				 <div class="aui-title"><span class="aui-ftn16 aui-padded-r-10">申请 </span><span class="aui-ftn18">VIP试用</span></div>
			 </header>
			</van-sticky>
			<div class="super_sy">
				<div v-if="!product.isTotal" v-cloak>
				  <div id="super_product">
					  <div class="good_t aui-bg-f">
						  <van-row>
							  <van-col span="6">
								  <div class="good-img" v-bind:style="{backgroundImage:'url(' + product.data.image + ')'}" @click="fnPreview(product.data.image)"></div>
							  </van-col>
							  <van-col span="18" class="good_cont aui-padded-l-15">
							  <van-row class="name">
								  <van-col span="2" class="aui-padded-t-5">
									  <img src="../../assets/tb_icon.png" width="18" height="18" alt="" v-if="product.data.downtype == 1">
									  <img src="../../assets/tm_icon.png" width="18" height="18" alt="" v-if="product.data.downtype == 2">
									  <img src="../../assets/jd_icon.png" width="18" height="18" alt="" v-if="product.data.downtype == 3">
									  <img src="../../assets/pdd_icon.png" width="18" height="18" alt="" v-if="product.data.downtype == 4">
									  <img src="../../assets/al_icon.png" width="18" height="18" alt="" v-if="product.data.downtype == 5">
								  		<img src="../../assets/dou_icon.png" width="18" height="18" alt="" v-if="product.data.downtype == 6">
										<img src="../../assets/kuai_icon.png" width="18" height="18" alt="" v-if="product.data.downtype == 7">
										<img src="../../assets/taobaotj_icon.png" width="18" height="18" alt="" v-if="product.data.downtype == 8">
								  </van-col>
								  <van-col span="22">
									  <span class="aui-text-7 aui-ftn14 aui-padded-l-5" v-text="product.data.name"></span>
								  </van-col>
							  </van-row>

								  <van-row class="item aui-text-7 aui-ftn12 aui-padded-t-5">
									  <van-col span="6">下单金额:</van-col>
									  <van-col span="18">￥{{product.data.price}}</van-col>
								  </van-row>
								  <van-row class="item aui-text-7 aui-ftn12 aui-padded-t-5">
									  <van-col span="6">返还金额:</van-col>
									  <van-col span="18">￥{{product.data.back_price}}</van-col>
								  </van-row>
								  <van-row class="item aui-text-7 aui-ftn12 aui-padded-t-5">
									  <van-col span="6">活动ID:</van-col>
									  <van-col span="18">{{product.data.id}}</van-col>
								  </van-row>
							  </van-col>
						  </van-row>
					  </div>
					  <div class="good_b aui-bg-f">
						  <van-row class="aui-padded-b-10">
							  <van-col span="8">
								  <span class="aui-ftn12 aui-text-7">剩余</span>&nbsp;<span class="aui-ftn14 aui-text-3">{{product.data.exitnum}}份</span>
							  </van-col>
							  <van-col span="8">
								  <span class="aui-ftn12 aui-text-7">总数</span>&nbsp;<span class="aui-ftn14 aui-text-3">{{product.data.num}}份</span>
							  </van-col>
						  </van-row>
						  <van-row class="aui-padded-b-10">
							  <van-col span="8">
								  <span class="aui-ftn12 aui-text-7">申请</span>&nbsp;<span class="aui-ftn14 aui-text-3">{{product.data.hot}}人</span>
							  </van-col>
							  <van-col span="8">
								  <span class="aui-ftn12 aui-text-7">通过</span>&nbsp;<span class="aui-ftn14 aui-text-3">{{product.data.pass}}人</span>
							  </van-col>
							  <van-col span="8">
								  <span class="aui-ftn12 aui-text-7">试用</span>&nbsp;<span class="aui-ftn14 aui-text-3">{{product.data.finish}}人</span>
							  </van-col>
						  </van-row>
						  <div class="tag">
							  <div class="aui-label aui-label-danger aui-margin-r-5" v-for="(item, index) in product.data.label" v-text="item"></div>
						  </div>
					  </div>
					  <div class="hd aui-bg-f aui-margin-t-10 aui-padded-15" v-if="!product.isLogin || !product.isRz" v-cloak>
						  <div class="aui-text-3 aui-text-center aui-ftn16 aui-font-weight aui-padded-b-15">活动详情</div>
						  <div class="sign aui-bg-f" v-if="!product.isLogin" v-cloak>
							  <van-row>
								  <van-col span="12">
									  <div class="login_btn aui-ftn14 aui-text-red aui-text-center"  @click="fnOpenLogin">
										  登录
									  </div>
								  </van-col>
								  <van-col span="12">
									  <div class="register_btn aui-ftn14 aui-text-f aui-bg-red aui-text-center" @click="fnOpenRegister">
										  注册
									  </div>
								  </van-col>
							  </van-row>
						  </div>
						  <div class="btn aui-text-center aui-text-f aui-ftn14 aui-bg-red aui-margin-t-15 aui-margin-b-15" v-if="product.isLogin && !product.isRz" @click="fnOpenRz" v-cloak>实名后可参加试用活动</div>
					  </div>
					  <!-- 内容 -->
					  <div class="product_cnt" v-if="product.isRz && product.isLogin" v-cloak>
						  <!-- one -->
						  <div class="one aui-bg-f aui-margin-t-10 aui-margin-b-10 aui-padded-10">
							  <div class="title aui-margin-b-15">
								  <img src="../../assets/icon_one.png" alt="">
								  <span class="aui-ftn14 aui-text-6 aui-font-weight aui-padded-l-10">选择下单买号</span>
							  </div>
							  <div class="item aui-padded-t-10 aui-padded-b-10 aui-padded-l-15 aui-padded-r-15 aui-margin-t-10 aui-margin-b-10" :class="{'active': item.id == select_user.id}" v-if="product.data.buynum.length > 0" v-for="(item, index) in product.data.buynum" @click="select_user = item">
								  <van-row>
									  <van-col span="20" class="lt">
										  <span class="aui-ftn14 aui-padded-r-5" v-text="item.username"></span>
										  <span class="aui-ftn12" v-text="item.text"></span>
									  </van-col>
									  <van-col span="4" class="rt aui-text-right">
										  <i class="iconfont icon-gou aui-ftn14"></i>
									  </van-col>
								  </van-row>
							  </div>
							  <div style="margin: auto" class="aui-text-center">
								  <div class="aui-btn aui-btn-warning aui-margin-t-15 aui-margin-b-10 aui-ftn14"  style="margin: auto" @click="fnOpenAddUser">+添加买号</div>
							  </div>
						  </div>
						  <!-- two -->
						  <div class="two aui-bg-f aui-margin-t-10 aui-margin-b-10 aui-padded-10">
							  <div class="title aui-margin-b-15">
								  <img src="../../assets/icon_two.png" alt="">
								  <span class="aui-ftn14 aui-text-6 aui-font-weight aui-padded-l-10">找到宝贝</span>
							  </div>
							  <!-- 不是电脑端 -->
							  <div class="item aui-padded-t-10 aui-padded-b-10 aui-border-b">
								  <van-row class="aui-ftn14">
									  <van-col span="2" class="aui-text-7">
										  1、
									  </van-col>
									  <van-col span="22" class="aui-text-red">
										  打开{{product.data.downtype_name}}
									  </van-col>
								  </van-row>
							  </div>
							  <!-- 电脑端 -->
							  <div class="item aui-padded-t-10 aui-padded-b-10 aui-border-b" v-if="product.data.mode == 5">
								  <van-row class="aui-ftn14">
									  <van-col span="2" class="aui-text-7">
										  2、
									  </van-col>
									  <van-col span="22">
										  <div class="aui-padded-b-5">
											  <div class="aui-btn aui-btn-warning" id="url" data-clipboard-action="copy" :data-clipboard-text="product.data.url"  @click="fnCopyText('#url')">点击复制链接</div>
											  <span class="aui-text-7">,去浏览器打开参加试用</span>
										  </div>
										  <div class="aui-text-7" v-text="product.data.url"></div>
									  </van-col>
								  </van-row>
							  </div>
							  <div v-if="product.data.mode == 1 || product.data.mode == 2">
								  <div class="item aui-padded-t-10 aui-padded-b-10 aui-border-b">
									  <van-row class="aui-ftn14">
										  <van-col span="2" class="aui-text-7">
											  2、
										  </van-col>
										  <van-col span="22">
											  <div class="aui-text-7">搜索关键词:<span class="aui-text-red" v-text="product.data.keyword.key"></span>
											  <span class="aui-text-7 aui-padded-5 aui-ftn12">(请手动输入关键词,不可复制)</span>
											  </div>
											  <div class="aui-btn aui-btn-warning aui-margin-t-10" @click="fnChangeKeyWord">换个关键词</div>
										  </van-col>
									  </van-row>
								  </div>

								  <div class="item aui-padded-t-10 aui-padded-b-10 aui-border-b">
									  <van-row class="aui-ftn14">
										  <van-col span="2" class="aui-text-7">
											  3、
										  </van-col>
										  <van-col span="22">
											  <span class="aui-text-7">选择排序:</span><span class="aui-text-red aui-padded-l-10" v-text="product.data.keyword.sort"></span>
										  </van-col>
									  </van-row>
								  </div>

								  <div class="item aui-padded-t-10 aui-padded-b-10 aui-border-b">
									  <van-row class="aui-ftn14">
										  <van-col span="2" class="aui-text-7">
											  4、
										  </van-col>
										  <van-col span="22">
											  <span class="aui-text-7">大概第几屏:</span><span class="aui-text-red aui-padded-l-10" v-text="product.data.keyword.page"></span>
										  </van-col>
									  </van-row>
								  </div>
							  </div>

							  <div class="item aui-padded-t-10 aui-padded-b-10 aui-border-b" v-if="product.data.mode == 3">
								  <van-row class="aui-ftn14">
									  <van-col span="2" class="aui-text-7">
										  2、
									  </van-col>
									  <van-col span="22">
										  <span class="aui-text-7">二维码:</span>
										  <van-row class="aui-padded-t-10">
											  <van-col span="12">
												  <div class="good-img" v-bind:style="{backgroundImage:'url(' + product.data.qrcode_image + ')'}" @click="fnPreview(product.data.qrcode_image)"></div>
											  </van-col>
										  </van-row>
									  </van-col>
								  </van-row>
							  </div>

							  <div class="item aui-padded-t-10 aui-padded-b-10 aui-border-b" v-if="product.data.mode == 4">
								  <van-row class="aui-ftn14">
									  <van-col span="2" class="aui-text-7">
										  2、
									  </van-col>
									  <van-col span="22">
										  <span class="aui-text-7">淘口令:</span>
										  <span class="aui-text-red aui-padded-l-10" v-text="product.data.tkl"></span>
										  <div class="aui-btn aui-btn-danger" id="tkl" data-clipboard-action="copy" :data-clipboard-text="product.data.tkl"  @click="fnCopyText('#tkl')">复制</div>
									  </van-col>
								  </van-row>
							  </div>

							  <div class="item aui-padded-t-10 aui-padded-b-10 aui-border-b" v-if="product.data.min">
								  <van-row class="aui-ftn14">
									  <van-col span="2" class="aui-text-7">
										  <span v-if="product.data.mode != 1 && product.data.mode != 2 && product.data.mode != 3">2</span>
										  <span v-if="product.data.mode == 1 || product.data.mode == 2">5</span>
										  <span v-if="product.data.mode == 3">3</span>、
									  </van-col>
									  <van-col span="22">
										  <span class="aui-text-7">最低价:</span><span class="aui-text-red aui-padded-l-10" v-text="product.data.min"></span>
									  </van-col>
								  </van-row>
							  </div>
							  <div class="item aui-padded-t-10 aui-padded-b-10" v-if="product.data.max">
								  <van-row class="aui-ftn14">
									  <van-col span="2" class="aui-text-7">
										  <span v-if="product.data.mode != 1 && product.data.mode != 2 && product.data.mode != 3">3</span>
										  <span v-if="product.data.mode == 1 || product.data.mode == 2">6</span>
										  <span v-if="product.data.mode == 3">4</span>、
									  </van-col>
									  <van-col span="22">
										  <span class="aui-text-7">最高价:</span><span class="aui-text-red aui-padded-l-10" v-text="product.data.max"></span>
									  </van-col>
								  </van-row>
							  </div>

							  <div class="item aui-padded-t-10 aui-padded-b-10">
								  <van-row class="aui-ftn14">
									  <van-col span="2" class="aui-text-7">
										  <span v-if="product.data.mode != 1 && product.data.mode != 2 && product.data.mode != 3">4</span>
										  <span v-if="product.data.mode == 1 || product.data.mode == 2">7</span>
										  <span v-if="product.data.mode == 3">5</span>、
									  </van-col>
									  <van-col span="22">
										  <span class="aui-text-7">核对图片按￥{{product.data.price}}元购买:</span>
										  <van-row class="aui-padded-t-10">
											  <van-col span="12">
												  <div class="good-img" v-bind:style="{backgroundImage:'url(' + product.data.goods_image + ')'}" @click="fnPreview(product.data.goods_image, 0)"></div>
											  </van-col>
										  </van-row>
									  </van-col>
								  </van-row>
							  </div>
						  </div>

						  <!-- three -->
						  <!-- <div class="three aui-bg-f aui-margin-t-10 aui-margin-b-10 aui-padded-10">
							  <div class="title aui-margin-b-15">
								  <img src="../../assets/icon_three.png" alt="">
								  <span class="aui-ftn14 aui-text-6 aui-font-weight aui-padded-l-10">核对店铺名</span>
							  </div>
							  <div class="input aui-padded-l-15">
								  <van-row>
									  <van-col span="18">
										  <input type="text" class="aui-ftn14" name="search" v-model="product.data.storename" placeholder="请输入店铺名" style="background-color: transparent!important;">
									  </van-col>
									  <van-col span="6">
										  <div class="aui-text-f aui-text-center button aui-ftn14" @click="fnCheckShop">点击核对</div>
									  </van-col>
								  </van-row>
							  </div>
						  </div> -->
					  </div>
				  </div>
				  <van-sticky>
					<div class="fixed aui-bg-f" style="bottom: 0" id="fixed">
						<div class="content">
							<van-row>
								<van-col span="18" class="aui-ftn14 aui-text-f lt">
									商家已存{{product.data.total}}元保证金
								</van-col>
								<van-col span="6" class="rt aui-text-f aui-text-center aui-ftn16 aui-bg-red" @click="fnApply" v-if="!product.data.exittime && !product.isApply" v-cloak>
									我要申请
								</van-col>
								<van-col span="6" class="aui-text-f aui-text-center aui-ftn16 time_btn" v-else-if="product.data.exittime" v-cloak>
								  <van-count-down :time="product.data.exittime*1000" @finish="fnGetGoodData"/>
								</van-col>
								<van-col span="6" class="aui-text-f aui-text-center aui-ftn16 wait_btn aui-bg-purple" v-else-if="!product.data.exittime && product.isApply" @click="fnOpenSyDetail()" v-cloak>
									试用详情
								</van-col>
							</van-row>
						</div>
					</div>
				  </van-sticky>
				</div>
				<!-- 首次试用 -->
				<div class="sz_taobao" v-if="code.first_input" v-cloak>
					<div class="bg"></div>
					<div class="sz_taobao_content">
						<div class="title aui-text-center aui-text-f aui-bg-red">
							<span class="aui-ftn14">首次申请试用,请填写验证码</span>
						</div>
						<div class="content aui-bg-f aui-padded-10 aui-padded-t-15 aui-padded-b-15">
							<van-row>
								<van-col span="16">
									<input type="text" name="verify" v-model="code.yzm" placeholder="验证码" class="aui-padded-l-10 aui-ftn14" style="width: 90%!important;border: 1px solid #ddd;border-radius: 4px;height: 22px;line-height: 22px;">
								</van-col>
								<van-col span="8">
									<div class="aui-btn aui-ftn13" @click="fnVerify" v-bind:class="{'aui-btn-danger': !code.isSet, 'aui-btn-primary': code.isSet}" v-cloak>{{code.verify}}</div>
								</van-col>
							</van-row>
						</div>
						<div class="bb aui-text-center">
							<van-row>
								<van-col span="12" class="btn aui-text-f aui-ftn16 aui-bg-red confirm_btn" @click="fnInputYmz">
									确定
								</van-col>
								<van-col span="12" class="btn aui-text-7 aui-ftn16 aui-bg-f close_btn" @click="code.first_input = false">
									关闭
								</van-col>
							</van-row>
						</div>
					</div>
				</div>
				<div v-if="product.isTotal" v-cloak>
					<div class="no-data aui-text-center aui-text-9">
						<i class="iconfont icon-lujing1161"></i>
						<div class="aui-ftn15" v-text="product.no_data">
						</div>
					</div>
				</div>
		  </div>
		  </div>
		</van-pull-refresh>
	</div>
</template>

<script>
  import Product from '../../service/product.js'
  import sign from '../../service/sign.js'
  export default {
    data () {
      return {
        timer: null,
        isLoading: true,
        image_type: '',
        id: '',
        uid: '',
        product: {
            isApply: false,
            isLogin: false,
            isRz: false,
            data: {},
            isTotal: false,
            no_data: '',
			refreshing: false,
			is_first: false
        },
        select_user: {},
		disabled: false,
		code: {
		    isSet: false,
		    verify: '发送短信',
			yzm: '',
			first_input: false
		}
      }
    },
	mounted () {
		this.init()
		window.addEventListener('scroll', this.handleScroll, true);
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.handleScroll, true);
	},
    methods: {
		handleScroll () {
			this.disabled = this.utils.handleScroll()
		},
		onRefresh() {
		  setTimeout(() => {
			this.product.refreshing = false
			this.init()
		  }, 1000);
		},
      init: function() {
        this.id = this.$route.params.id
        this.uid =  this.$store.state.uid ? this.$store.state.uid : ''
		this.product.isLogin = this.$store.state.uid ? true : false;
        this.fnGetGoodData()
      },
      fnGetGoodData: function() {
        Product.fnGetGoodData({id: this.id, uid: this.uid, isToken: false})
        .then(ret => {
		  this.isLoading = false;
          if (ret && ret.status) {
            this.product.isTotal = false;
              this.product.data = ret.data;
              if (this.product.data.order_id) this.product.isApply = true;
			  this.product.is_first = this.product.data.is_first;
              this.product.isRz = this.product.data.is_auth;
            //   this.product.is_store = this.product.data.is_store;
              this.select_user = this.product.data.buynum.length > 0 ? this.product.data.buynum[0] : {};
          } else {
              this.product.isTotal = true;
              this.product.no_data = ret.msg;
          }
        })
      },
      // 预览图片
      fnPreview: function(path) {
          this.utils.fnPreviewPic([path])
      },
	  // 发送短信
	    fnVerify: function() {
			if (!this.code.isSet) {
				sign.fnSendMsg({mobile: this.$store.state.username}).then(res => {
				  if (res) {
					this.utils.fnMsg(res.msg);
					if (res.status) {
					  this.setTime(60);
					}
				  }
				})
			}
	        
	    },
	    /*
	     * 倒计时
	    */
	    setTime: function(time) {
	        if (time > 0) {
	            this.code.isSet = true;
	            this.code.verify = time+'秒后再试';
	            time = time - 1;
	            var vm = this;
	            setTimeout(function() {
	              vm.setTime(time)
	            }, 1000)
	        } else {
	            this.code.isSet = false;
	            this.code.verify = '发送短信';
	        }
	    },
	    // 首次申请试用
	  fnInputYmz: function() {
	  	var vm = this;
	  	if (this.code.yzm) {
	  		Product.verifyCheck({uid: this.$store.state.uid, verify: this.code.yzm, isToken: true
	  		}).then(res => {
	  			if (res) {
	  				this.utils.fnMsg(res.msg)
	  				if (res.status) {
	  					setTimeout(function() {
	  						vm.product.is_first = false;
	  						vm.code.first_input = !vm.code.first_input;
							vm.fnApply()
	  					}, 2000)
	  			
	  				}
	  			}
	  		})
	  	} else {
	  		this.utils.fnMsg('请输入验证码');
	  	}
	  },
      // 我要申请
      fnApply: function() {
          if (this.$store.state.uid) {
              if (this.product.isRz) {
				  if (this.product.is_first) {
				  	this.code.first_input = !this.code.first_input;
				  } else {
				  	this.fnSelectUser()
				  }
              } else {
                  this.utils.fnMsg('请先实名认证');
                  var vm = this;
                  setTimeout(function() {
                    vm.utils.fnOpenCommon(vm, {name: 'rz', query: {title: '实名认证'}})
                  }, 2000)
              }
          } else {
              this.utils.fnMsg('请先登录');
              var vm = this;
              setTimeout(function() {
                  vm.fnOpenLogin()
              }, 2000)
          }
      },
      // 选择淘宝帐号
      fnSelectUser: function() {
          if (!this.select_user) {
            this.$dialog.alert({
              message: '请选择下单买号'
            })
          } else {
            // api
            let param = {
              goods_id: this.$route.params.id,
              uid: this.$store.state.uid,
              buynum: this.select_user.username,
			  isToken: true
            }
            Product.fnApplySuper(param).then(data => {
              if (!data) {
                this.$dialog.alert({
                  message: '网络错误,请稍候再试！'
                })
                 return false;
              }
              if (data) {
                var vm = this;
                this.$dialog.alert({
                  title: '提示',
                  message: data.msg,
                }).then(() => {
                  vm.product.isApply = true;
                  vm.product.data.order_id = data.order_id;
                })
              }
            })

          }
      },
      // 去登录
      fnOpenLogin: function() {
        this.utils.fnOpenCommon(this, {name: 'login', query:{from: 'super_product', active: 0}, params: {id: this.$route.params.id}})
      },
      // 去注册
      fnOpenRegister: function() {
        this.utils.fnOpenCommon(this, {name: 'login', query:{from: 'super_product', active: 1}, params: {id: this.$route.params.id}})
      },
      // 去认证
      fnOpenRz: function() {
        this.utils.fnOpenCommon(this, {name: 'rz'})
      },
      // 添加买号
      fnOpenAddUser: function() {
        var type = 0;
        if (this.product.data.downtype == 1 || this.product.data.downtype == 2 || this.product.data.downtype == 5) {
           type = 0;
        } else if (this.product.data.downtype == 3) {
            type = 1;
        } else if (this.product.data.downtype == 4) {
            type = 2;
        }
        this.utils.fnOpenCommon(this, {name: 'add_user', query: {type: type, title: '添加买号'}})
      },
      // 换个关键词
      fnChangeKeyWord: function() {
        Product.fnChangeKeyword({goods_id: this.product.data.id, keyword: this.product.data.keyword.key, isToken: true}).then(data => {
          if (data) {
              if (data.status) {
                  this.product.data.keyword = data.data;
              }
          }
        })
      },
      // 复制
      fnCopyText: function(el) {
        let vm = this;
        let clipboard = new this.clipboard(el);
        clipboard.on('success', function () {
          vm.utils.fnMsg("复制成功")
        });
        clipboard.on('error', function () {
          vm.utils.fnMsg("复制失败")
        });
      },
      // 打开试用详情
      fnOpenSyDetail: function() {
        this.utils.fnOpenCommon(this, {name: 'sy_record_detail', params: {order_id: this.product.data.order_id}})
      }
    }
  }
</script>
<style scoped>
  body,html {
  	background-color: #f5f5f5
  }

  #super_product {
    padding-bottom: 50px;
  }

  .banner .slide-img {
  	width: 100%;
    height: 350px;
  	background-size: cover;
  	background-repeat: no-repeat;
  	background-position: center center
  }

  .banner .swiper-container {
  	--swiper-pagination-color: var(--pink)
  }

  div.content .top {
  	border-bottom: 1px solid #eee
  }

  div.content .top .name {
  	padding-bottom: 15px;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
  	-ms-flex-direction: row;
  	-webkit-flex-direction: row;
  	flex-direction: row;
  	-ms-flex-pack: start;
  	-webkit-justify-content: flex-start;
  	justify-content: flex-start
  }

    div.content .top .name img {
      width: 18px;
    }

  div.content .bottom {
  	padding: 15px;
  	margin-bottom: 10px
  }

  .tab .tab_top {
  	height: 36px;
  	line-height: 36px
  }

  .tab .tab_top .item {
  	border-bottom: 1px solid #eee
  }

  .tab .tab_top .item.active {
  	color: var(--pink)!important;
  	border-bottom-color: var(--pink)
  }

  .tab .tab_record {
  	padding: 15px 15px 15px 5px
  }

  .tab .tab_record .item {
  	padding: 0 0 10px 10px
  }

  .tab .tab_record .item .avatar {
  	width: 40px;
  	height: 40px;
  	border-radius: 50%;
  	margin: auto;
  	background-position: center center;
  	background-repeat: no-repeat;
  	background-size: cover
  }

  .tab .tab_cont .tab_desc .title {
  	font-size: 14px;
  }

  .tab .tab_cont .tab_desc .desc {
  	font-size: 14px;
    max-height: 100%;
  }

  .tab .sign {
  	padding: 50px 25px
  }

  .tab .sign .login_btn,.tab .sign .register_btn {
  	width: 100px;
  	height: 36px;
  	line-height: 36px;
  	border-radius: 4px;
  	margin: auto
  }

  .tab .sign .login_btn {
  	border: 1px solid var(--pink)
  }

  .fixed {
  	z-index: 1100;
    transform: translateZ(0);
  }

  .fixed .content {
  	height: 50px;
  	line-height: 50px
  }

  .fixed .content .btn {
  	height: 50px;
  	line-height: 50px;
  	border-radius: 0;
    font-size: 16px;
    max-height: 100%;
  }

  .fixed .content .lt {
  	background-color: #444;
  	padding-left: 20px
  }

  .fixed .content .time_btn {
  	background-color: #000
  }

  .van-count-down {
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 16px;
  }

  .sz_taobao .bg {
  	position: fixed;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	z-index: 100;
  	background-color: rgba(0,0,0,.5)
  }

  .sz_taobao .sz_taobao_content {
  	position: fixed;
  	top: 50%;
  	right: 10%;
  	left: 10%;
  	z-index: 100001;
  	-webkit-transform: translateY(-50%);
  	-moz-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	transform: translateY(-50%);
  	background-color: #fff;
  	border-radius: 6px
  }

  .sz_taobao .sz_taobao_content .title {
  	height: 36px;
  	line-height: 36px;
  	border-radius: 6px 6px 0 0
  }

  .sz_taobao .sz_taobao_content .content .choose-item {
  	border-bottom: 1px solid #eee
  }

  .sz_taobao .sz_taobao_content .content .add_btn {
  	border-radius: 4px;
  	padding: 0 10px;
  	margin-top: 10px
  }

  .sz_taobao .sz_taobao_content .bb .btn {
  	height: 40px;
  	line-height: 40px;
  	border-top: 1px solid #eee
  }

  .sz_taobao .sz_taobao_content .bb .confirm_btn {
  	border-radius: 0 0 0 5px
  }

  .sz_taobao .sz_taobao_content .bb .close_btn {
  	border-radius: 0 0 5px 0
  }

  .super_sy .good_t,.sy_detail .good_t {
  	padding: 10px
  }

  .super_sy .good_t .good-img,.sy_detail .good_t .good-img {
  	position: relative;
  	width: 100%;
  	height: 0;
  	overflow: hidden;
  	margin: 0;
  	padding-bottom: 100%;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover
  }

  .super_sy .good_t .good_cont .name,.sy_detail .good_t .good_cont .name {
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-flex-direction: row;
  	-ms-flex-direction: row;
  	flex-direction: row;
  	-webkit-justify-content: flex-start;
  	-ms-flex-pack: start;
  	justify-content: flex-start;
  	-webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .super_sy .good_t .good_cont .name img,.sy_detail .good_t .good_cont .name img {
  	width: 18px;
  	height: 18px
  }

  div.super_sy .good_b {
  	padding: 10px
  }

  div.super_sy .good_b .tag .item {
  	padding: 0 5px;
  	border-radius: 4px
  }

  div.super_sy .hd .btn {
  	width: 180px;
  	height: 36px;
  	line-height: 36px;
  	border-radius: 4px;
  	margin: auto
  }

  div.super_sy .sign {
  	padding: 50px 25px
  }

  div.super_sy .sign .login_btn,div.super_sy .sign .register_btn {
  	width: 100px;
  	height: 36px;
  	line-height: 36px;
  	border-radius: 4px;
  	margin: auto
  }

  div.super_sy .sign .login_btn {
  	border: 1px solid var(--pink)
  }

  div.super_sy .product_cnt .title {
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-flex-direction: row;
  	-ms-flex-direction: row;
  	flex-direction: row;
  	-webkit-justify-content: flex-start;
  	-ms-flex-pack: start;
  	justify-content: flex-start;
  	line-height: 25px
  }

  div.super_sy .product_cnt .title img {
  	width: 25px;
  	height: 25px
  }

  div.super_sy .product_cnt .one .item {
  	background-color: #fff9e7;
  	border-radius: 4px
  }

  div.super_sy .product_cnt .one .item .lt {
  	color: #777
  }

  div.super_sy .product_cnt .one .item .rt {
  	color: #fff9e7
  }

  div.super_sy .product_cnt .one .active .lt,div.super_sy .product_cnt .one .active .rt {
  	color: var(--pink)
  }

  div.super_sy .product_cnt .three .input {
  	height: 32px;
  	line-height: 32px;
  	border: 1px solid #F93;
  	border-radius: 20px
  }

  div.super_sy .product_cnt .three .input input {
  	height: 30px;
  	line-height: 30px;
    border: 0;
  }

  div.super_sy .product_cnt .three .input .button {
  	height: 32px;
  	line-height: 32px;
  	background-color: #F93;
  	border-radius: 0 20px 20px 0
  }

  div.super_sy .product_cnt .four .upload {
  	display: flex;
  	flex-direction: row;
  	justify-content: flex-start
  }

  div.super_sy .product_cnt .four .upload .save_img,div.super_sy .product_cnt .four .upload .upload_img {
  	width: 100px;
  	height: 150px;
  	line-height: 150px;
  	background-color: #f2f2f2;
  	background-size: cover;
  	background-position: center center;
  	background-repeat: no-repeat
  }

  .sy_detail .good_t .sq_btn {
  	width: 100px;
  	height: 25px;
  	line-height: 25px;
  	border-radius: 20px;
  	border: 1px solid #777
  }

  .sy_detail .good_t .passed {
  	border-color: var(--pink)!important
  }

  .sy_detail .no_sk {
  	padding: 30px 10px
  }

  .sy_detail .sk_pass .item .change_btn {
  	padding: 3px 5px;
  	border-radius: 3px;
  	background-color: #F93
  }

  .sy_detail .img-list .img {
  	width: 90px;
  	height: 160px;
  	background-repeat: no-repeat;
  	background-size: cover;
  	background-position: center center
  }

  .sy_detail .img-list:nth-child(odd) {
  	margin-right: 5px
  }

  .sy_detail .img-list:nth-child(even) {
  	margin-left: 5px
  }

  .sy_detail .pj .input {
  	height: 40px;
  	line-height: 40px;
  	border-radius: 4px;
  	border: 1px solid var(--pink);
  	padding-left: 10px
  }

  .sy_detail .pj .input input {
  	height: 40px;
  	line-height: 40px
  }

  .sy_detail .pj .input .btn {
  	height: 38px;
  	line-height: 38px;
  	border-radius: 0 4px 4px 0
  }
</style>
